<%--
  Created by IntelliJ IDEA.
  User: ASEVILLA
  Date: 22/08/11
  Time: 17:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<script type="text/javascript">


function renderIcon(val) {
    return '<a href="#">Ver</a>';//como obtener el id de la fila seleccionada?
}

Ext.onReady(function() {
    Ext.QuickTips.init();


    // hideous function to generate employee data


    var Employee = Ext.data.Record.create([
        {
            name: 'idObjeto',
            type: 'int'
        },
        {
            name: 'name',
            type: 'string'
        },
        {
            name: 'propiedades',
            type: 'combo'  //modificar las clases de utilerias Json para los tipos combo
        }
    ]);


    var store = new Ext.data.GroupingStore({
        reader: new Ext.data.JsonReader({fields: Employee}),


        data: [
            {
                idObjeto: 1,
                name: 'Ftp1'
            },
            {
                idObjeto: 2,
                name: 'Ftp2'
            },
            {
                idObjeto: 3,
                name: 'Ftp3'
            },
            {
                idObjeto: 4,
                name: 'Ftp4'
            }//modificar las clases d UtileriaJson para transformar los datos de listas de mapas a este formato de cadena Json
        ],
        sortInfo: {field: 'name', direction: 'ASC'}
    });

    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update',
        listeners:{
            validateedit:function(roweditor, changes, record, number) {
              
                   
                  alert(changes.name);
                 alert(changes.idObjeto);
                 
                 
                var lola=record.get('idObjeto');
                
                Ext.Ajax.request({
                    url: 'procesos.jsp',//url a la q vamos a mandar los parametros
                    method: POST,
                    success: function() {
                        mascara(false);
                    },
                    params: lola
                });
                
                
                
                
                
            }
        }
    });

    var grid = new Ext.grid.GridPanel({
        store: store,
        width: 550,
        stripeRows: false,
        region:'center',
        margins: '0 5 5 5',
        autoExpandColumn: 'name',
        plugins: [editor],
        view: new Ext.grid.GroupingView({
            markDirty: true
        }),
        tbar: [
            {
                // iconCls: 'icon-user-add',
                text: 'Agregar Objeto',
                handler: function() {
                    /*    var e = new Employee({
                     name: 'New Guy',
                     email: 'new@exttest.com',
                     start: (new Date()).clearTime(),
                     salary: 50000,
                     active: true
                     });
                     editor.stopEditing();
                     store.insert(0, e);
                     grid.getView().refresh();
                     grid.getSelectionModel().selectRow(0);
                     editor.startEditing(0);      */
                     var e = new Employee({
                     name: 'New FTP',
                     idObjeto:'0',//hacer dinamica esta parte: nombre de columna y valores de default
                     active: true
                     });
                     editor.stopEditing();
                     store.insert(0, e);
                     grid.getView().refresh();
                     grid.getSelectionModel().selectRow(0);
                     editor.startEditing(0);
                }
            },
            '-',
            {
                ref: '../removeBtn',
                //   iconCls: 'icon-user-delete',
                text: 'Eliminar Objeto',
                disabled: true,
                handler: function() {
                    editor.stopEditing();
                    var s = grid.getSelectionModel().getSelections();
                    for (var i = 0, r; r = s[i]; i++) {
                        store.remove(r);
                    }
                }//cuando eliminamos una fila, como le pasamos el id 
            }
        ],

        columns: [

            {
                header: 'idObjeto',
                dataIndex: 'idObjeto',
                width: 50,
                sortable: true,
                editable:false,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {
                id: 'name',
                header: 'Nombre Objeto',
                dataIndex: 'name',
                width: 70,
                sortable: true,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {
                id: 'propiedades',
                header: 'Propiedades',
                //  dataIndex: 'name',
                width: 70,
                renderer:renderIcon
            }
        ]
    });


    var layout = new Ext.Panel({
        title: 'Employee Salary by Month',
        layout: 'border',
        layoutConfig: {
            columns: 1
        },
        border:false,
        width:500,
        height: 200,
        items: [grid]
    });
    layout.render('editaALtaObjetosFormaId');

    grid.getSelectionModel().on('selectionchange', function(sm) {

        //alert('Hola');
        
        grid.removeBtn.setDisabled(sm.getCount() < 1);
    });

    grid.getSelectionModel().on('afteredit', function(sm) {

        alert("hola");

    });


});


</script>
<div style="margin-left:90px">
    <div id="editaALtaObjetosFormaId">

    </div>

</div>